<template>
    <div class="container">
        <Header :left="true" title="提现详情"></Header>

        <div class="box title-box">
            <div>¥ {{fMoney(null,null,detail.amount)}}</div>
            <div style="margin-top:10px;font-size:12px;">{{detail.statusDesc}}</div>
        </div>

        <div class="box">

            <div class="box-item">
                <div class="box-left">申请时间</div>
                {{fDate(null,null,detail.createDate)}}
            </div>

            <div class="box-item">
                <div class="box-left">提现类型</div>
                {{detail.transferTypeDesc}}
            </div>

            <div class="box-item">
                <div class="box-left">申请金额</div>
                {{fMoney(null,null,detail.amount)}}
            </div>

            <div class="box-item">
                <div class="box-left">手续费</div>
                {{fMoney(null,null,detail.amount - detail.actualMoney)}}
            </div>

            <div class="box-item">
                <div class="box-left">收款账户名</div>
                {{detail.trueName}}
            </div>

            <div class="box-item">
                <div class="box-left">收款账户</div>
                {{detail.alipayAccount}}
            </div>

            <div class="box-item" v-if="isNotBlank(detail.confirmDate)">
                <div class="box-left">完成时间</div>
                {{fDate(null,null,detail.confirmDate)}}
            </div>

            <div class="box-item" v-if="isNotBlank(detail.rejectReason)" >
                <div class="box-left">拒绝原因</div>
                {{detail.rejectReason}}
            </div>

            <div class="box-item" style="padding:15px;" v-if="detail.imageList.length > 0" >
                <div style="text-align:center;margin-bottom:15px;">转账凭证</div>
                <img style="width:100%" v-for="(item,index) in detail.imageList" :key="index" :src="item" />
            </div>

        </div>
    </div>
</template>
<script>
import Header from '../../common/Header.vue';
export default {
    components:{Header},
    data:function(){
        return {
            detail:{
                imageList:[]
            }
        };
    },
    created:function(){
        var info = localStorage.getItem('widthdrawdetail');
        if(info){
             this.detail = JSON.parse(info);
        }
    },
    methods:{
    }
}
</script>
<style scoped>
    .container{
        width: 100%;min-height: 100%;
        background: #F2F6FC;
        padding: 20px;
        color:#303133;
    }
    .box{
        width: 100%;
        background: #fff;
        border-radius: 10px;
        position: relative;
        padding: 0 10px;
        margin-top:20px;
    }
    .title-box{
        text-align: center;
        font-size: 28px;
        padding: 20px 0;
        margin-top: 0;
    }
    .box .box-item{
        padding: 15px 5px 15px 100px;
        border-bottom: 1px solid #E4E7ED;
        position: relative;
        color: #606266;
        text-align: right;
    }
    .box .box-item:last-child{
        border-bottom: none;
    }
    .box .box-item .box-left{
        position: absolute;
        top:15px;bottom: 0;
        margin: auto;
        left: 10px;
        color:#606266;
    }
</style>
